import React, {Component} from "react";
import classnames from "classnames";
import {Icon} from "weaver-mobile";
import "./floating-btn.less";

function noop() {
}

const throttle = function (delay, action) {
    let last = 0;
    return function (...params) {
        const curr = +new Date();
        if (curr - last > delay) {
            action.apply(this, ...params);
            last = curr;
        }
    };
};

export default class FloatingBtn extends Component {
    static defaultProps = {
        prefixCls: "floating-btn",
        onClick: noop,
        size: 45,
        iconType: "home-page",
        icon: ""
    }

    constructor(props) {
        super(props);
        const hd = window.getThemeVars().hd;
        this.state = {
            left: document.documentElement.clientWidth - (this.props.size + 17) * hd,
            top: (document.documentElement.clientHeight * 0.8) - (this.props.size + 17) * hd,
            statusClassName: "",
            homeBtnTips: "",
        };
    }

    componentDidMount() {
        this.updateHomeBtnTips();
    }

    updateHomeBtnTips() {
        if (window.e9ssoMobileConfig && window.e9ssoMobileConfig.inUse) {
            if (window.e9ssoMobileConfig.getHomeBtnTips) {
                window.e9ssoMobileConfig.getHomeBtnTips().then((res) => {
                    this.setState({homeBtnTips: res});
                });
            }
        } else {
            this.setState({homeBtnTips: this.props.homeBtnTips || ""});
        }
    }

    onTouchMove(event) {
        // event.preventDefault();// 阻止其他事件
        // 如果这个元素的位置内只有一个手指的话
        event.persist();
        if (event.targetTouches.length === 1) {
            const hd = window.getThemeVars().hd;
            const touch = event.targetTouches[0];// 把元素放在手指所在的位置
            let left = touch.pageX - (18 * hd);
            let top = touch.pageY - (18 * hd);
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0;
            }
            if (left + ((this.props.size + 2) * hd) > document.documentElement.clientWidth) {
                left = document.documentElement.clientWidth - ((this.props.size + 2) * hd);
            }
            if (top + ((this.props.size + 2) * hd) > document.documentElement.clientHeight) {
                top = document.documentElement.clientHeight - ((this.props.size + 2) * hd);
            }
            this.setState({left, top});
        }
    }

    onTouchStart() {
        this.setState({statusClassName: "status-active"});
    }

    onTouchEnd() {
        const hd = window.getThemeVars().hd;
        let {left} = this.state;
        if (left + (18 * hd) <= document.documentElement.clientWidth / 2) {
            left = 15;
        } else {
            left = document.documentElement.clientWidth - (15 * hd) - ((this.props.size + 2) * hd);
        }

        this.setState({statusClassName: "", left});
    }

    onClick() {
        if (window.e9ssoMobileConfig && window.e9ssoMobileConfig.inUse) {
            if (window.e9ssoMobileConfig.onHomePageClick) {
                window.e9ssoMobileConfig.onHomePageClick();
            } else {
                this.props.onClick();
            }
        } else {
            this.props.onClick();
        }
    }

    onNameCick(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }
    }

    render() {
        const {className, style, prefixCls, iconType, icon, size} = this.props;
        const {statusClassName, homeBtnTips} = this.state;
        const wrapCls = classnames(`${prefixCls}`, className);
        const wrapStyle = {width: size, height: size, left: this.state.left, top: this.state.top, ...style};
        return (
            <div>
                <div className={wrapCls}
                     style={wrapStyle}
                     onTouchStart={() => this.onTouchStart()}
                     onTouchEnd={() => this.onTouchEnd()}
                     onTouchMove={(e) => {
                         throttle(200, this.onTouchMove(e));
                     }}
                     onClick={() => this.onClick()}
                >
                    {homeBtnTips !== "" && <div className={"home-btn-tip"}
                                                onClick={(e) => {
                                                    this.onNameCick(e);
                                                }}
                                                onTouchStart={(e) => {
                                                    e.stopPropagation();
                                                }}
                                                onTouchMove={(e) => {
                                                    e.stopPropagation();
                                                }}
                    >{homeBtnTips}</div>}
                    <div className={`status-wrap ${statusClassName}`}>
                        {icon ? icon : <Icon type={iconType} style={{fontWeight: "bold"}}/> }
                    </div>
                </div>
                {this.props.children}
            </div>
        );
    }
}
